<template>
    <!--合作药店管理-->
    <div class="doctorservermanage">
        <tmpHeader :index='14'/>
        <div class="addManag">
            <h4 class="tt">
                <Button class="edit-btn" type="primary" v-if="!editFlag" @click="editFlag = true">
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>编辑
                </Button>
                <Button class="edit-btn" v-if="editFlag" @click="editFlag = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </h4>
            <div class="fuwu">
                <!-- 医生服务-->              
                    <!--第一行-->
                    <div class="select_wufu" ref="all">
                        <template v-if="editFlag">
                            <div v-for="(items,index) in allServerList" :key='index'>
                                <Checkbox v-model="items.flag" on-change='change(items.flag)'>{{ items.orgName }}</Checkbox>
                            </div>
                            
                        </template>
                        <template v-else-if="!editFlag">
                            <div v-if="items.selected == 1" v-for="(items,index) in allServerList" :key='index'>
                                <label :for="'a' + items.id">{{ items.orgName }}</label>
                            </div>
                        </template>
                    </div>        
            </div>
            <!--保存-->
            <div class="expert_save">
                <Button class="btn" type="primary" v-if="editFlag" @click="navto">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="reback" v-if="editFlag">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
                </Button>
            </div>
        </div>
    </div>
</template>

<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
    components: {
        tmpHeader
    },
    data() {
        return {
            allServiceList: [],
            docServiceList: [],
            pageNo: null,
            searchKey: "",
            editFlag: false,
            id: sessionStorage.getItem("hospitalId"),
        };
    },
    created() {
        let pageNo = this.$route.params.pageNo;
        if (pageNo) {
            this.pageNo = parseInt(pageNo);
        }
        let breadList = [ 
        { path: "/index", title: "首页" },
        {
            path: "/index/operation/mechanism/index",
            title: "机构运营"
        },
        {
            path: "/index/operation/home",
            title: "机构配置管理"
        }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted(){
        //获取合作关系药店
        this.cooperate()
        // 获取所有药店
        let params = {
            pageNo: 1,
            pageSize: 10,
            hospitalType: 2
        };
        let arr = []
        this.docServiceList.forEach(a =>{
            arr.push(a.id)
        })
        this.$axios.post(api.findKbaoHospitalRegisterDtoPage,params).then(resp => {
            if (resp.data.code == 1) {
                let tmpData = resp.data.object;
                this.allServiceList = tmpData;
                for (let i = 0; i < this.allServiceList.length; i++) {
                    //循环对比id
                    let index = arr.indexOf(this.allServiceList[i].id)
                    if (index != -1) {
                        this.allServiceList[i].selected = 1;
                        this.allServiceList[i].flag = true
                    } else {
                        this.allServiceList[i].selected = 0;
                        this.allServiceList[i].flag = false
                    }                     
                }
            }
        }).catch(err => {
            console.log(err);
        });     
    },
    methods: {
        //获取合作关系药店
        cooperate(){
            let param = {               
                hospitalId: this.id,                      
            }
            this.$axios.post(api.drugstoreList, param).then(resp => {
                this.docServiceList = resp.data.object;
            }).catch(err => {
                console.log(err);
            });
        },
        // 保存
        navto() {
            let arr = [];
            // 循环已操作的数据 找出已经选中数据的ID
            this.allServerList.forEach(item =>{
                if(Boolean(item.flag)) {
                    arr.push({hospitalId:this.id,pharmacyId:item.id})
                }                
            })            
            this.$axios
                .post(api.drugstoreByList, {
                    hospitalId: this.id,
                    list: arr
                })
                .then(res => {
                    if (res.data.success) {
                        this.$Message.info("操作成功");
                        //   公用方法
                        setTimeout(()=>{
                            this.reback ()
                        }, 3000)
                    }
                });
        },
        reback() {
            this.editFlag = false
            this.cooperate()
        }
    },
    computed: {
        allServerList() {
            console.log(this.allServiceList)
            let arr = []
            this.docServiceList.forEach(a =>{
                arr.push(a.id)
            })
            for (let i = 0; i < this.allServiceList.length; i++) {
                    //循环对比id
                    let index = arr.indexOf(this.allServiceList[i].id)
                    if (index != -1) {
                        this.allServiceList[i].selected = 1;
                        this.allServiceList[i].flag = true
                    } else {
                        this.allServiceList[i].selected = 0;
                        this.allServiceList[i].flag = false
                    }                                  
                }
            return this.allServiceList;
        }
    }
};
</script>

<style scoped lang="less">
.doctorservermanage {
    padding: 10px 30px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .addManag {
        display: flex;
        flex-direction: column;
        padding: 20px;
        .tt {
            font-size: 22px;
            font-weight: 700;
            line-height: 32px;
            width: 100%;
            .edit-btn {
                float: right;
            }
        }
        .fuwu {
            width: calc(100% - 100px);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid rgb(242, 242, 242);           
                .select_wufu {
                    margin: 0 30px;
                    display: flex;
                    flex-direction: row;
                    padding: 0 20px;
                    align-items: center;
                    flex-wrap: wrap;
                    div {
                        width: 20%;
                        margin: 10px 20px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        input {
                            outline: none;
                            border: none;
                        }
                    }
                    .fuwu {
                        width: calc(100% - 100px);
                        margin: 0 auto;
                        display: flex;
                        flex-direction: column;
                        border-bottom: 1px solid rgb(242, 242, 242);
                        .xsfw {
                            margin: 10px 0;
                            .select_wufu {
                                margin: 0 30px;
                                display: flex;
                                flex-direction: row;
                                padding: 14px 20px;
                                align-items: center;
                                flex-wrap: wrap;
                                div {
                                    width: 20%;
                                    margin: 10px 20px;
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    input {
                                        outline: none;
                                        border: none;
                                    }
                                    label {
                                        user-select: none;
                                    }
                                }
                            }
                        }
                    }
                    
                }
        }
        .expert_save {
            width: 200px;
            height: 50px;
            margin: 10px auto;
            .btn{
                margin: 0 auto;
            }
        }
    }
}
</style>